<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel admin-panel" style="height: 500px">
    <div class="panel-head"><strong class="icon-reorder"> 修改缺课记录信息</strong></div>
    <div class="padding border-bottom">
<%--        <!-- Button trigger modal -->--%>
<%--        <button type="button"  data-toggle="modal" data-target="#myModal">--%>
<%--            Launch demo modal--%>
<%--        </button>--%>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                        <h4 class="modal-title" id="myModalLabel">修改缺课记录</h4>
                    </div>
                    <div class="modal-body">
                        <div class="body-content">
                            <table>
                                <tr style="height: 40px;">
                                    <td>编号:</td>
                                    <td><input type="text" readonly id="attendanceid" name="id"></input></td>
                                </tr>
                                <tr style="height: 40px;">
                                    <td>缺课日期：</td>
                                    <td><input type="date" id="attendancedate" name="date"></td>
                                </tr>
                                <tr style="height: 40px;">
                                    <td>缺课节次:</td>
                                    <td>
                                        <select name="count" id="count" style="width: 200px;">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr style="height: 40px;">
                                    <td>课程名称：</td>
                                    <td><input type="lessonname" id="lessonname" name="age"></td>
                                </tr>
                                <tr style="height: 40px;">
                                    <td>学生学号：</td>
                                    <td><input readonly id="studentnumber" name="studentnumber"></td>
                                </tr>
                                <tr style="height: 40px;">
                                    <td>缺课类型：</td>
                                    <td><select name="attendancetype" id="attendancetype" style="width: 300px;">
                                        <option value="迟到">迟到</option>
                                        <option value="早退">早退</option>
                                        <option value="旷课">旷课</option>
                                    </select></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" onclick="update()" >保存修改</button>
                    </div>
                    <script>
                        function update() {//修改按钮被点击
                            $('#close').click()
                            $.post("/updateAttendanceInfo",
                                {id:$("#attendanceid").val(),absencedate:$("#attendancedate").val(),
                                    count:$("#count").val(),lessonname:$("#lessonname").val(),
                                    studentnumber:$("#studentnumber").val(),type:$("#attendancetype").val()},function (data) {
                                    alert(data);
                                    getData(1);
                             },"json");
                        };
                    </script>
                </div>
            </div>
        </div>

        <%--    输入按钮组--%>
    <div class="form-group" >
        <div style="width: 30px;height: 20px;float: left;"></div><!--用来填充-->
        <div class="label" style="float:left;margin-top: 10px">
            <label>学生学号：</label>
        </div>
        <div class="field" style="float:left;">
            <input type="text" class="input w50" style="width: 200px;" id="id" name="id" placeholder="请输入学生学号..." />
            <div class="tips"></div>
        </div>
        <div style="width: 200px;height: 20px;float: left;"></div><!--用来填充-->
        <div class="label" style="float:left;margin-top: 10px">
            <label>课程名：</label>
        </div>
        <div class="field" style="float:left;">
            <input type="text" class="input w50" style="width: 200px;" id="name" name="name" placeholder="请输入课程名" />
            <div class="tips"></div>
        </div>
        <div style="width: 200px;height: 20px;float: left;"></div><!--用来填充-->
        <%--      <button style="float:left;" type="button" id="search" class="button border-yellow"><span class="icon-plus-square-o"></span> 查询</button>--%>
        <button style="width: 200px;height: 40px;background-color: #ddeeff" type="button" id="search" >查询</button>
        <script>
            function updateStudent(idx) {//修改弹出框的数据
                $.post(" /searchAAttendance",{id:idx,absencedate:'',count:0,lessonname:'',studentnumber:0,type:''},function (data) {
                        $("#attendanceid").val(data[0].id);
                        $("#attendancedate").val(data[0].absencedate);
                        $("#count").val(data[0].count);
                        $("#lessonname").val(data[0].lessonname)
                        $("#studentnumber").val(data[0].studentnumber);
                        $("#attendancetype").val(data[0].type);
                },"json");
            }
            $("#search").click(function() {<!--点击查询按钮触发的事件-->
                var page={start:1,count:10,total:10},totalPages=1;
                var $tds=$("#table").empty();<!--清空子元素-->
                $("#table").append("<tr>\n" +
                    "      <th width=\"10%\">编号</th>\n" +
                    "      <th width=\"15%\">缺课日期</th>\n" +
                    "      <th width=\"15%\">缺课节次</th>\n" +
                    "      <th width=\"15%\">课程名</th>\n" +
                    "      <th width=\"15%\">学生学号</th>\n" +
                    "      <th width=\"10%\">缺课类型</th>\n" +
                    "      <th width=\"10%\">修改</th>\n" +
                    "    </tr>");<!--添加表头-->
                var id = $("#id").val();
                if(id==''){
                    id=0;
                }
                var name = $("#name").val();
                //更改页面设置
                $.post(" /setPageInfo",{idx:1},function (data) {
                },"json");
                // 查询数据
                $.post("/searchAttendances",{id:0,absencedate:'',count:0,lessonname:name,studentnumber:id,type:''},function (data) {
                    if(data.length==0){
                        $("#table").append("<tr><td colspan='6' align='center'>空</td></tr>");
                    }
                    for(j = 0; j < data.length; j++) {
                        var t="<tr><td>"+data[j].id+"</td><td>"+data[j].absencedate+"</td>";
                        t+="<td>"+data[j].count+"</td><td>"+data[j].lessonname+"</td>" +
                            "<td>"+data[j].studentnumber+"</td><td>"+data[j].type+"</td>"+
                            "<td><a onclick='updateStudent("+data[j].id+")' data-toggle=\"modal\" data-target=\"#myModal\">修改</a></td></tr>";
                        $("#table").append(t);
                    }

                },"json");
                // 查询页面信息
                $.post(" /getPageInfo",function (data) {
                    page=data;
                    if(page.total%page.count==0){
                        totalPages=page.total/page.count;
                    }else{
                        totalPages=page.total/page.count+1;
                    }
                    if(totalPages==0){//当不满一页时
                        totalPages=1;
                    }
                },"json");
            });
        </script>
        <%--      <div style="width: 1080px;height: 20px"></div><!--用来填充-->--%>
    </div>
    </div>
    <table class="table table-hover text-center" id="table">
        <tr>
            <th width="10%">编号</th>
            <th width="15%">缺课日期</th>
            <th width="15%">缺课节次</th>
            <th width="15%">课程名</th>
            <th width="15%">学生学号</th>
            <th width="10%">缺课类型</th>
            <th width="10%">修改</th>
        </tr>

    </table>
</div>
<%--分页技术--%>
<ul class="pagination pagination-lg" style="margin-left: 40%;">
    <li><a href="javascript:getPNData(-1)" >&laquo;</a></li>
    <li><a href="javascript:getData($('#idx1').html());" id="idx1" class="pages">1</a></li>
    <li><a href="javascript:getData($('#idx2').html());" id="idx2" class="pages">2</a></li>
    <li><a href="javascript:getData($('#idx3').html());" id="idx3" class="pages">3</a></li>
    <li><a href="javascript:getData($('#idx4').html());" id="idx4" class="pages">4</a></li>
    <li><a href="javascript:getData($('#idx5').html());" id="idx5" class="pages">5</a></li>
    <li><a href="javascript:getData($('#idx6').html());" id="idx6" class="pages">6</a></li>
    <li><a href="javascript:getPNData(1)">&raquo;</a></li>
</ul>
<script>
    // 获取指定页的数据
    function getData(idx) {
        //更改页面设置
        $.post(" /setPageInfo",{idx:idx},function (data) {
        },"json");
        //查询所在页面信息
        // var page={start:1,count:10,total:10},totalPages=1;
        var $tds=$("#table").empty();<!--清空子元素-->
        $("#table").append("<tr>\n" +
            "            <th width=\"10%\">编号</th>\n" +
            "            <th width=\"15%\">缺课日期</th>\n" +
            "            <th width=\"15%\">缺课节次</th>\n" +
            "            <th width=\"15%\">课程名</th>\n" +
            "            <th width=\"15%\">学生学号</th>\n" +
            "            <th width=\"10%\">缺课类型</th>\n" +
            "            <th width=\"10%\">修改</th>\n" +
            "        </tr>");<!--添加表头-->
        var id = $("#id").val();
        if(id==''){
            id=0;
        }
        var name = $("#name").val();
        // 查询数据
        $.post("/searchAttendances",{id:0,absencedate:'',count:0,lessonname:name,studentnumber:id,type:''},function (data) {
            if(data.length==0){
                $("#table").append("<tr><td colspan='6' align='center'>空</td></tr>");
            }
            for(j = 0; j < data.length; j++) {
                var t="<tr><td>"+data[j].id+"</td><td>"+data[j].absencedate+"</td>";
                t+="<td>"+data[j].count+"</td><td>"+data[j].lessonname+"</td>" +
                    "<td>"+data[j].studentnumber+"</td><td>"+data[j].type+"</td>"+
                "<td><a onclick='updateStudent("+data[j].id+")' data-toggle=\"modal\" data-target=\"#myModal\">修改</a></td></tr>";
                $("#table").append(t);
            }

        },"json");
    }
    // 获取上一页或下一页的数据
    function getPNData(step) {
        if(step==-1){
            if ($("#idx1").text()!=1){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text($("#idx"+j).text()-1);
                }
            }
        }else{
            if ($("#idx6").text()!= totalPages){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text(Number.parseInt($("#idx"+j).text())+step);
                }
            }
        }


    }
</script>
</div>
</body></html>
